<template>
    <div class="app-container">
        <div class="test-calendar-container">
            <div class="calendar-title">测试日历</div>
            <FullCalendar ref="myTestFullCalendar" :plugins="calendarPlugins" :header="headerToolbar"
                :columnHeaderHtml="columnHeaderHtml" locale="zh-cn" :firstDay="firstDay" :button-text="buttonText"
                :all-day-text="allDayText" :week-numbers="weekNumbers" :week-label="weekText"
                :business-hours="businessHours" :all-day-slot="false" :unselect-auto="false" slotLabelInterval="00:30"
                slot-label-format="HH:mm" :select-allow="handlerSelectAllow" title-format="YYYY年MM月D日"
                selectable="false" select-mirror="true" default-view="timeGridWeek" select-overlap="true"
                @dateClick="handleDateClick" @select="handleSelect" @event-click="eventClick"
                @eventMouseEnter="eventMouseEnter" />
            <el-dialog :title="dialogTitle" :visible.sync="open" width="600px" append-to-body v-dialog-drag>
                <el-form ref="form" v-model="form" label-width="120px">
                    <el-form-item label="计划时间">
                        <div class="current-time">
                            {{ dateTimeFormat(handleSelectStart) }}-{{ dateTimeFormat(handleSelectEnd).split(' ')[1] }}
                        </div>
                    </el-form-item>

                    <el-form-item label="添加事项" prop="form.taskItem">
                        <el-input v-model="form.taskItem" placeholder="请输入待办事项" style="width: 320px" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import '@fullcalendar/core/locales/zh-cn'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import momentPlugin from '@fullcalendar/moment'
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
import 'tippy.js/animations/scale.css'

export default {
    name: 'testFullCalendar',
    components: { FullCalendar },
    data() {
        return {
            calendarPlugins: [dayGridPlugin, timeGridPlugin, momentPlugin, interactionPlugin],
            headerToolbar: {
                left: 'today',
                center: 'prevYear,prev title next,nextYear',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            firstDay: 1,  //每周一作为起始
            buttonText: {
                today: '今天1123', //设置按钮文字
                week: '周',
                day: '日',
                month: '月'
            },
            allDayText: '全天', // 更改all-day 显示文本
            weekNumbers: true, // 显示周次
            weekText: '周', // 显示周次文本
            businessHours: {    //除开始到结束的时间外，置灰
                startTime: '08:00',//moment().format('HH:mm'),
                endTime: '24:00',
                daysOfWeek: [0, 1, 2, 3, 4, 5, 6]
            },
            dialogTitle: "添加任务事项",
            open: false,
            form: {
                taskItem: ''
            },
            handleSelectStart: '', //选中的开始时间
            handleSelectEnd: '' //选中的结束时间
        }
    },
    methods: {
        /**
         * 表头格式设置
         */
        columnHeaderHtml(mom) {
            let array = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            for (let i = 0; i <= 6; i++) {
                if (mom.getDay() === i) {
                    return mom.getFullYear()
                        + '/'
                        + ((mom.getMonth() + 1) < 10 ? ('0' + (mom.getMonth() + 1)) : (mom.getMonth() + 1))
                        + '/'
                        + (mom.getDate() < 10 ? ('0' + mom.getDate()) : mom.getDate())
                        + '<br>' + array[i]
                }
            }
        },
        // 点击选中日期
        handleDateClick(info) {
            console.log("-------handleDateClick:-------", info)
            let clickDate = new Date(info.date)
            console.log(clickDate.getFullYear() + "-" + (clickDate.getMonth() + 1) + "-" + clickDate.getDate() + " " + clickDate.getHours() + ":" + clickDate.getMinutes() + ":" + clickDate.getSeconds())
        },
        // 随时判断时间是否合法，通过返回true/false来判断是否能够选择
        handlerSelectAllow: info => {
            console.log("handlerSelectAllow:", info)
            const currentDate = new Date()
            const start = info.start
            const end = info.end
            return (start <= end && start >= currentDate)
        },
        //选完时间之后松手
        handleSelect(info) {
            console.log("handleSelect:", info)
            this.handleSelectStart = info.start;
            this.handleSelectEnd = info.end;
            this.open = true;
        },
        //点击确认后，添加任务事项
        confirmAdd() {
            let calendarApi = this.$refs.myTestFullCalendar.getApi();
            console.log(calendarApi);
            console.log(this.form.taskItem)
            calendarApi.addEvent({
                title: this.form.taskItem,
                start: this.handleSelectStart,
                end: this.handleSelectEnd,
                color: 'green',
                textColor: 'white',
                id: Math.random() * 10000
            })
            this.open = false;
        },
        // 点击任务事项
        eventClick(info) {
            console.log("eventClick:", info)
        },
        // 鼠标经过任务事项
        eventMouseEnter(info) {
            console.log("eventMouseEnter...", info)
            tippy(info.el, {
                content: this.dateTimeFormat(this.handleSelectStart) + '-' + this.dateTimeFormat(this.handleSelectEnd).split(' ')[1] + '<br/>' + this.form.taskItem,
                theme: 'tomato',
                allowHTML: true,
            })
        },
        dateTimeFormat(dateTime) {
            let dateTimeParam = new Date(dateTime)
            let year = dateTimeParam.getFullYear()
            let month = dateTimeParam.getMonth() + 1 < 10 ? ('0' + (dateTimeParam.getMonth() + 1)) : (dateTimeParam.getMonth() + 1);
            let date = dateTimeParam.getDate() < 10 ? ('0' + dateTimeParam.getDate()) : dateTimeParam.getDate();
            let hours = dateTimeParam.getHours() < 10 ? ('0' + dateTimeParam.getHours()) : dateTimeParam.getHours();
            let minutes = dateTimeParam.getMinutes() < 10 ? ('0' + dateTimeParam.getMinutes()) : dateTimeParam.getMinutes();
            return year + "-" + month + "-" + date + " " + hours + ":" + minutes
        }
    }
}
</script>

<style lang='scss' scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
</style>
<style lang="scss" scoped>
.test-calendar-container {
    ::v-deep .fc-center {
        display: flex;
        align-items: center;

        h2 {
            padding: 0 10px;
        }
    }

    ::v-deep .fc-toolbar>*> :not(:first-child) {
        margin: 0;
    }
}
</style>